<!--
 * @Author: alenjzhang
 * @Date: 2024-03-20 20:56:30
 * @Description: 基本信息
-->
<script setup lang="ts">
import Upload from '@/components/avatar-upload/index.vue';
import { CHECK_IN_METHOD_ENUM, INPUT_PLACEHOLDER, MARITAL_STATUS_ENUM, SELECT_PLACEHOLDER, SEX_ENUM, dateFormat } from '@/const';
import { useBedSelect } from '@/hooks';
import type { FormProps } from '@/types';
import { toRefs } from 'vue';

const props = defineProps<FormProps>()

const { readonly, validateInfos, formState } = toRefs(props);
const { beds } = useBedSelect();

</script>

<template>
	<a-form-item class="fullWidth" v-if="props.add" v-bind="validateInfos.avatar" label="头像">
		<Upload v-model:value="formState.avatar" add></Upload>
	</a-form-item>
	<a-form-item label="姓名" class="thirtyPercentWidth" v-bind="validateInfos.name">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.name"></a-input>
		<span v-else>{{ formState.name }}</span>
	</a-form-item>
	<a-form-item label="身份证号" class="thirtyPercentWidth" v-bind="validateInfos.card">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.card"></a-input>
		<span v-else>{{ formState.card }}</span>
	</a-form-item>
	<a-form-item label="兴趣爱好" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.interest"></a-input>
		<span v-else>{{ formState.interest }}</span>
	</a-form-item>
	<a-form-item label="性别" class="thirtyPercentWidth" v-bind="validateInfos.sex">
		<a-radio-group v-if="!readonly" :options="SEX_ENUM.options" v-model:value="formState.sex"></a-radio-group>
		<span v-else>{{ SEX_ENUM.map[formState.sex] }}</span>
	</a-form-item>
	<a-form-item label="家庭住址" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.addr"></a-input>
		<span v-else>{{ formState.addr }}</span>
	</a-form-item>
	<a-form-item label="入住时间" class="thirtyPercentWidth" v-bind="validateInfos.checkInDate">
		<a-date-picker :format="dateFormat" :valueFormat="dateFormat" v-if="!readonly" class="fullWidth"
			:placeholder="SELECT_PLACEHOLDER" v-model:value="formState.checkInDate">
		</a-date-picker>
		<span v-else>{{ formState.checkInDate }}</span>
	</a-form-item>
	<a-form-item label="出生年月" class="thirtyPercentWidth" v-bind="validateInfos.birth">
		<a-date-picker v-if="!readonly" class="fullWidth" type="date" :valueFormat="dateFormat"
			:placeholder="SELECT_PLACEHOLDER" v-model:value="formState.birth">
		</a-date-picker>
		<span v-else>{{ formState.birth }}</span>
	</a-form-item>
	<a-form-item label="紧急联系人" class="thirtyPercentWidth" v-bind="validateInfos.emergencyName">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.emergencyName"></a-input>
		<span v-else>{{ formState.emergencyName }}</span>
	</a-form-item>
	<a-form-item label="入住方式" class="thirtyPercentWidth" v-bind="validateInfos.checkInMethod">
		<a-radio-group v-if="!readonly" :options="CHECK_IN_METHOD_ENUM.options"
			v-model:value="formState.checkInMethod"></a-radio-group>
		<span v-else>{{ CHECK_IN_METHOD_ENUM.map[formState.checkInMethod] }}</span>
	</a-form-item>
	<a-form-item label="年龄" class="thirtyPercentWidth">
		<a-input v-if="!readonly" placeholder="根据出生年月自动计算" disabled v-model:value="formState.age"></a-input>
		<span v-else>{{ formState.age }}</span>
	</a-form-item>
	<a-form-item label="联系人电话" class="thirtyPercentWidth" v-bind="validateInfos.emergencyPhone">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.emergencyPhone"></a-input>
		<span v-else>{{ formState.emergencyPhone }}</span>
	</a-form-item>
	<a-form-item label="楼区房间床位" class="thirtyPercentWidth" v-bind="validateInfos.room">
		<!-- <a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.room"></a-input> -->
		<a-cascader :fieldNames="{ label: 'Name', value: 'ID', children: 'Children' }" v-if="!readonly"
			v-model:value="formState.room" :options="beds" />
		<span v-else>{{ formState.roomName }}</span>
	</a-form-item>
	<a-form-item label="婚姻状况" class="thirtyPercentWidth">
		<a-radio-group v-if="!readonly" :options="MARITAL_STATUS_ENUM.options"
			v-model:value="formState.maritalStatus"></a-radio-group>
		<span v-else>{{ MARITAL_STATUS_ENUM.map[formState.maritalStatus || '1'] }}</span>
	</a-form-item>
</template>
